<template>
	<view class="">
		<view class="card1 animated fadeIn" hover-class="tada">
			<view class="">
				<image class="image_message" :src="MessageToInfo.fromUserImage" />
			</view>
			<view class="Info">
				<view class="Info_t">
					<view class="">
						{{MessageToInfo.fromUserName}}
					</view>
					
					<view class="" style="font-size: 22rpx;">
						{{MessageToInfo.fromShopName}}
					</view>
				</view>
				<text style="font-size: 28rpx;color: #333333;">{{MessageToInfo.createTime}}</text>
			</view>
		
		</view>
		<view class="inform">
			<view class="Info_title">
				{{MessageToInfo.title}}
			</view>
			<view class="Info_content">
				{{MessageToInfo.content}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				MessageToInfo:''
			}
		},
		onLoad(option) {
			console.log(option.role)
			if(option.role==='2'){
				console.log(2222)
				this.getMessageFromInfo(option.id)
			}else if(option.role==='1'){
				console.log(111)
				this.getMessageFromInfo(option.id)
			}else{
				this.getMessageToInfo(option.id)
			}
			
		},
		onShow() {
		},
		methods:{
			//未读信息
			getunreadnumber(){
				//#ifdef APP-PLUS
				this.$api.getunreadnumber().then((res) => {
					console.log(res.data.dataMap)
					let num = res.data.dataMap
					console.log(num)
					plus.runtime.setBadgeNumber(num);     		
				})
				//#endif
			},   
			//用户通知详情
			getMessageToInfo(id){
				this.$api.getMessageToInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.MessageToInfo = res.data.dataMap
						this.getunreadnumber()
					}
				})
			},
			//老师教务通知详情
			getMessageFromInfo(id){
				this.$api.getMessageToInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.MessageToInfo = res.data.dataMap
						this.getunreadnumber()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.Info{
		width: 580rpx;
		margin-left: 15rpx;
	}
	.Info_t{
		/* width: 570rpx; */
		height: 100%;
	}
	.Info_t{
		height: 100rpx;
		margin-top: 10rpx;
	}
	.Info_t>view:nth-child(1){
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.Info_t>view:nth-child(2){
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
	.image_message{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.inform{
		width: 690rpx;
		margin: 0 auto;
		padding: 0 30rpx 0 30rpx;
	}
	.Info_title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 20rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.Info_content{
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.card1 {
		display: flex;
		height: 140rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 0rpx 40rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEEEEE;
	
	}
	.card1>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
</style>
